/**
 * 封装一个组件, 名字叫 『Button』 最终显示的结果是一个按钮
 * type:
 *   primary   蓝色
 *   danger    红色
 * 
 * disabled
 *    true     按钮不可点
 *    false    按钮可点
 * 
 * loading
 *    true     显示加载 gif 图
 *    false    不显示加载 gif 图
 */
import React, { Component } from 'react'
import './2.css';
//导入 gif 图
import gif from './loading.gif';

export default class Button extends Component {
  render() {
    //获取type属性
    let {type, disabled, loading, onClick} = this.props;
    return (
      <button onClick={onClick} className={type + (disabled ? ' disabled' : '')} >
        {loading ? <img width="12" src={gif} alt="" /> : null}
        {this.props.children}
      </button>
    )
  }
}
